<template>
  <div class="app-container">
    <Pagetitle
      :title="pageTitle.title"
      :name="pageTitle.name"
      :btnName="pageTitle.btnName"
      @btnFun="btnFun"
    ></Pagetitle>
    <div class="filter-container">
      <Row>
        <Col :md="4">
        <DatePicker
          v-model="taskHistoryDate"
          type="month"
          :clearable="false"
          format="yyyy-MM"
          placeholder="完成日期"
          @on-change="handleChange"
        ></DatePicker>
        </Col>
        <Col
          :md="20"
          class="search-btn"
        >
        <Select
          v-model="searchForm.classId"
          class="min-width"
          placeholder="全部品牌"
          @on-change="getStaffBrand()"
        >
          <Option value="">全部品牌</Option>
          <Option
            v-for="(bandclass,index) in brandClassSelect"
            :value="bandclass.id"
            :key="index"
          >{{bandclass.className}}</Option>
        </Select>
        </Col>
      </Row>
    </div>
    <div class="brandlist">
      <div class="brandlist-box">
        <div
          class="brandlist-item"
          v-for="item in dataTable.data"
        >
          <div class="brandlist-url">
            <img
              :src="item.logoUrl"
              alt=""
              v-if="item.logoUrl"
            >
            <img
              src="~@/assets/def-logo.png"
              alt="默认凯诘logo"
              v-else
            >
          </div>
          <div class="brandlist-info">
            <div class="brandlist-title">
              {{item.brandName}}
            </div>
            <ul>
              <li v-for="info in item.departmentList">
                <span class="info-name">{{info.departmentName}}</span> <span class="info-score">{{info.departmentScore}}</span>
              </li>
              <li
                class="info-url"
                @click="go(item)"
              >详情 ></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { fetchBrandList, fetchBrandClassList } from "@/api/table";
import { Pagetitle } from "@/components";
import { setStore } from "@/utils/index";
import format from "date-format";
export default {
  data() {
    return {
      pageTitle: {
        title: "品牌报表"
      },
      dataTable: {
        loading: false,
        border: false,
        columns: [],
        data: []
      },
      timeSelectValue: "1",
      timeSelect: [
        {
          value: "1",
          label: "按月份"
        }
      ],
      open: false,
      taskHistoryDate: "",
      dateType: "month",
      searchForm: {
        startTime: "",
        endTime: "",
        classId: ""
      },
      brandClassSelect: [],
      ruleValidate: {}
    };
  },
  components: {
    Pagetitle
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.taskHistoryDate = format("yyyy-MM", new Date());
      this.getStaffBrand();
    },
    async getStaffBrand() {
      let start;
      let end;
      if (this.taskHistoryDate !== "") {
        const nowDate = format("yyyy-MM", new Date(this.taskHistoryDate));
        if (this.timeSelectValue === "3") {
          start = nowDate[0];
          end = nowDate[1];
        } else if (this.timeSelectValue === "2") {
          start = nowDate + "-01-01";
          end = nowDate + "-12-31";
        } else if (this.timeSelectValue === "1") {
          const spData = nowDate.split("-");
          start = nowDate + "-01";
          end = nowDate + "-" + this.mGetDate(spData[0], spData[1]);
        }
      }

      this.dataTable.loading = true;
      const brandclass = await fetchBrandClassList();
      const res = await fetchBrandList({
        startTime: start,
        endTime: end,
        classId: this.searchForm.classId
      });
      brandclass.data.forEach(item => {
        const data = {};
        data.className = item.className;
        data.id = item.id;
        this.brandClassSelect.push(data);
      });
      this.dataTable.loading = false;
      this.count = res.data.total;
      this.dataTable.data = [];
      if (res.data.length > 0) {
        res.data.forEach(item => {
          const data = {};
          data.brandName = item.brandName;
          data.brandId = item.brandId;
          data.departmentList = item.departmentList;
          data.logoUrl = item.logoUrl;
          this.dataTable.data.push(data);
        });
      }
    },
    btnFun() {},
    handleChange() {
      this.getStaffBrand();
    },
    go(info) {
      setStore("brandInfo", info);
      const data = format("yyyy-MM", new Date(this.taskHistoryDate));
      this.$router.push({
        path: "reportBrandDetail",
        query: { time: data }
      });
    },
    mGetDate(year, month) {
      var d = new Date(year, month, 0);
      return d.getDate();
    }
  },
  computed: {
    ...mapGetters(["userId", "rolesId"])
  }
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixin";
.brandlist {
  padding: 5px 0;
  &-url {
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-items: center;
    img {
      width: 79px;
    }
  }
  &-box {
    display: flex;
    flex-wrap: wrap;
  }
  &-item {
    min-width: 274px;
    display: flex;
    margin: 5px 10px 5px 0;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    ul {
      list-style: none;
    }
    .info {
      &-name {
        font-size: 14px;
        color: @default-color;
      }
      &-score {
        font-size: 14px;
        color: @primary-color;
      }
      &-url {
        cursor: pointer;
        font-size: 14px;
        color: #1b6ec1;
      }
    }
  }
  &-title {
    font-weight: 500;
    font-size: 16px;
    color: @default-color;
  }
}
.clear-search {
  margin-left: 10px;
}
.group-user {
  color: @default-color;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
}
.warning {
  margin-left: 30px;
  color: @primary-color;
}
.total-score {
  font-size: 16px;
  color: @default-color;
  margin-bottom: 20px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  span {
    color: @primary-color;
  }
}
.filter-container {
  border-radius: 8px;
  margin-top: 15px;
  background-color: #fff;
  padding: 20px;
}
.date-picker {
  width: 208px;
  line-height: 30px;
  margin-left: 10px;
}
.search-btn {
  display: flex;
  justify-content: flex-end;
}
.min-width {
  width: 208px;
}
</style>